<!-- /登录 -->
<template>
	<div>
		<div>
			<el-carousel indicator-position="outside">
				<el-carousel-item v-for="(item) in notice" :key="item.id">
					<div style="display: flex; justify-content: center;align-items: center;">
						<span v-html="item.content"></span>
						<div class="notice">
							发布时间 {{item.create_time}}
						</div>
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>

		<div>
			<el-form v-loading="loading" element-loading-text="登录中..." element-loading-spinner="el-icon-loading"
			 element-loading-background="rgba(0, 0, 0, 0.8)" :rules="rules" ref="loginForm" :model="loginForm" class="loginClass">
				<h3>电子商务大赛评审系统登录</h3>
				<el-form-item prop="phone">
					<el-input type="text" v-model="loginForm.phone" auto-complete="off" placeholder="请输入电话号码..."></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="text" v-model="loginForm.password" auto-complete="off" show-password placeholder="请输入密码..."></el-input>
				</el-form-item>
				<el-form-item style="display: flex; justify-content: center; align-items: center; padding: 0; margin-bottom:0">
					<el-radio-group v-model="loginForm.ID">
						<el-radio label="管理员"></el-radio>
						<el-radio label="学生"></el-radio>
						<el-radio label="评委"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<div style="display: flex; justify-content: space-between;">
						<el-button type="text" style="padding-left: 10px;" @click="dialogFormVisible = true">立即注册</el-button>
						<el-button type="text" style="padding-right: 10px;" @click="forgotPassword">忘记密码</el-button>
					</div>
					<el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-dialog v-loading="loading" element-loading-text="注册中..." element-loading-spinner="el-icon-loading"
		 element-loading-background="rgba(0, 0, 0, 0.8)" title="学生注册" :visible.sync="dialogFormVisible">
			<el-form :model="Register">
				<el-form-item label="用户名" :label-width="formLabelWidth">
					<el-input v-model="Register.username" autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="密码" :label-width="formLabelWidth">
					<el-input v-model="Register.password" show-password autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" :label-width="formLabelWidth">
					<el-input v-model="Register.rePassword" show-password autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" :label-width="formLabelWidth">
					<el-input v-model="Register.phone" autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="地址" :label-width="formLabelWidth">
					<el-input v-model="Register.address" autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="所属院校" :label-width="formLabelWidth">
					<el-input v-model="Register.email" autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="身份证号" :label-width="formLabelWidth">
					<el-input v-model="Register.idNum"  autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="密保问题" :label-width="formLabelWidth">
					<el-input v-model="Register.question" type="textarea" autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item label="密保答案" :label-width="formLabelWidth">
					<el-input v-model="Register.answer" type="textarea" autocomplete="off" style="width: 300px;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="register">注册</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import marked from 'marked'
	export default {

		name: "Login",
		data() {
			return {
				loading: false,
				checked: true,
				loginForm: {
					phone: '',
					password: '',
					ID: "",
				},
				rules: {

					phone: [{
						required: true,
						message: "请输入电话号码",
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: "请输入密码",
						trigger: 'blur'
					}],
				},
				dialogFormVisible: false,
				formLabelWidth: "100px",
				Register: {
					username: "",
					password: "",
					rePassword: "",
					phone: "",
					address:"",
					email: "",
					question: "",
					answer: "",
					idNum: "",

				},
				notice: [],
				htmlContent: "",

			}
		},

		mounted() {
			this.getNoticeList();
		},

		methods: {
			forgotPassword() {
				this.$router.push('/forgot');
			},
			// 获取公告
			getNoticeList() {
				this.getRequest("/notice/").then(res => {
					for (let i = 0; i < res.obj.length; i++) {
						res.obj[i].content = marked(res.obj[i].content);
					}
					this.notice = res.obj;
				})
			},
			register() {
				if (this.Register.username && this.Register.password && this.Register.rePassword && this.Register.phone && this.Register
					.email && this.Register.question && this.Register.answer) {
					if (!(/^1[3456789]\d{9}$/.test(this.Register.phone))) {
					  return this.$message({
							message: '请输入正确的电话号码',
							type: 'warning'
						});
					}
					if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.Register.idNum))) {
					 return	this.$message({
							message: '请输入正确的身份证号码',
							type: 'warning'
						});
					}
					
					if (this.Register.password == this.Register.rePassword) {
						this.loading = true;
						this.postRequest('/users/register', this.Register).then(res => {
							this.loading = false;
							this.dialogFormVisible = false;
							return;
						})
					} else {
						this.$message({
							message: '两次密码不一致',
							type: 'warning'
						});
					}
				} else {
					return this.$message({
						message: '信息必须填写完整',
						type: 'warning'
					});
				}
			},
			login() {
				this.$refs.loginForm.validate((valid) => {
					if (valid) {
						this.loading = true;
						this.postKeyValueRequest('/users/Login', this.loginForm).then(res => {
							this.loading = false;
							if (res) {
								// javaScript 里面的存储 把user的信息放到session中。
								window.sessionStorage.setItem("user", JSON.stringify(res.obj))
								let path = this.$route.query.redirect;
								this.$router.replace((path == '/' || path == undefined) ? '/home' : path);
							}
						})
					} else {
						this.$message.error("请输入所有字段！")
						return false;
					}
				});
			},

		},

		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
	}
</script>

<style scoped>
	h3 {
		text-align: center;
		color: #00aaff;
	}

	.loginClass {
		border-radius: 15px;
		background-clip: padding-box;
		width: 400px;
		margin: 280px auto;
		padding: 15px 35px 15px 35px;
		background: #FFFFFF;
		border: #eaeaea;
		box-shadow: 0 0 25px #cbcbcb;
	}

	.el-carousel__item span {
		color: #475669;
		font-size: 20px;
		opacity: 0.75;
		line-height: 300px;
		margin: 100px;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #ff5500;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #409eff;
	}

	.notice {
		color: #475669;
		font-size: 15px;
		opacity: 0.75;
		line-height: 300px;
	}
</style>
